//import logo from './logo.svg';
import { useState } from 'react';
import { Button, Container, Stack } from 'react-bootstrap';
import AddBugetModel from './component/AddBugetModel';
import AddExpenseMotal from './component/AddExpenseModal';
import BudgetCard from './component/BudgetCard';
import NoclassBudgetCard from './component/NoclassBudgetCard';
import TotalBudgetCard from './component/TotalBudgetCard';
import ViewExpensesMotal from './component/ViewExpensesModal';
import { NOCLASS, useBudgets } from './context/BudgetsContext';

function App() {
  const [showAddBudgetModal, setShowAddBudgetModal] = useState(false);
  const [showAddExpenseModal, setShowAddExpenseModal] = useState(false);
  const [addExpenseModalBudgetId, setAddExpenseModalBudgetId] = useState();
  const [viewExpensesModalBudgetId, setViewExpensesModalBudgetId] = useState();
  const { budgets, getBudgetExpenses } = useBudgets();

  function openAddExpenseModal(budgetId) {
    setShowAddExpenseModal(true);
    setAddExpenseModalBudgetId(budgetId);
  }

  return (
    <>
      <Container className='my-4'>
        <Stack direction='horizontal' gap={2} className="mb-4">
          <h1 className='me-auto'>Budgets</h1>
          <Button variant='primary' onClick={() => setShowAddBudgetModal(true)}>Add Budget</Button>
          <Button variant='outline-primary' onClick={openAddExpenseModal}>Add Expense</Button>
        </Stack>
        <div className='budgets'>
          {budgets.map(budget => {
            const amount = getBudgetExpenses(budget.id).reduce((total, expense) => total + expense.amount, 0)
            return (
              <BudgetCard
                key={budget.id}
                name={budget.name}
                amount={amount}
                max={budget.max}
                onAddExpenseClick={() => openAddExpenseModal(budget.id)}
                onViewExpensesClick={() => setViewExpensesModalBudgetId(budget.id)}  />
            )
          })}
          <NoclassBudgetCard 
            onAddExpenseClick={openAddExpenseModal} 
            onViewExpensesClick={() => setViewExpensesModalBudgetId(NOCLASS)}/>
          <TotalBudgetCard />
        </div>
      </Container>
      <AddBugetModel show={showAddBudgetModal} handleCloce={() => setShowAddBudgetModal(!showAddBudgetModal)} />
      <AddExpenseMotal show={showAddExpenseModal} handleCloce={() => setShowAddExpenseModal(!showAddExpenseModal)} defaultBudgetId={addExpenseModalBudgetId} />
      <ViewExpensesMotal budgetId={viewExpensesModalBudgetId} handleCloce={()=> setViewExpensesModalBudgetId()} />
    </>
  );
}

export default App;
